<template>
  <div class="todo-list">
    <div v-for="(item,key) in data" :key="item.id" :class="{done: item.is_done}" class="pointer todo-item middle-flex">
      <label class="middle-flex content">
        <input @change="change(key)" :checked="item.is_done" class="check-btn" :value="item.id" type="checkbox">
        <span>{{item.content}}</span>
      </label>
      <span @click="remove(item.id)" class="remove-btn">删除</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    change(key) {
      const data = [...this.data]
      data[key].isDone = !data[key].isDone
      this.$emit('update:data', data)
    },
    remove(id) {
      if (window.confirm('确认是否删除')) return
      console.log('remove', id)
    }
  }
}
</script>

<style lang="scss" scoped>
.todo-list {
  line-height: 2;
  font-size: 16px;
}
.check-btn {
  margin-right: 10px;
}
.content {
  flex: 1;
}
.date {
  color: #aaa;
  font-size: 14px;
}
.done {
  opacity: 0.5;
  .content {
    flex: 1;
    text-decoration: line-through;
  }
}
.remove-btn {
  color: #aaa;
  font-size: 12px;
}
</style>
